<script setup lang="ts">
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'

const parentMoney = ref(1000)
defineExpose({
  parentMoney
})

//子组件标记函数 ref = xxx ，在script中可以使用ref()，入参为空就行，函数接收变量必须为 xxx
//如下：变量child为子组件实例，与vue2不同，子组件变量是私有的，需要使用defineExpose显示暴露出来
const el = ref(null)
const getChildInstance = () => {
  console.log('子组件实例', el)
  console.log('子组件实例中暴露的变量(需要.value)', (el?.value as any).childMoney)
}
</script>

<template>
  <button @click="getChildInstance">获取子组件实例</button>
  <ChildComponent ref="el" />
</template>

<style scoped></style>
